<template>
	<view>
		<u-navbar title-size="34" title="音频修改" leftIconColor="#343A40" title-color="#343A40" :border-bottom="false"
			:custom-back="goBack"></u-navbar>
		<view class="type-wrap position-relative">
			<view class="page-section page-section-gap page-body" :class="{'isShadow':blobUrl!==''}">
				<view class="" v-if="blobUrl">
					<audio :src="blobUrl"></audio>
					<view :style="animationState" class="audio-bg position-absolute isAudio"></view>
					<image class="audio-img" :src="$playImg" v-if="!isPlaying" @click="palyAudio"></image>
					<image class="audio-img" :src="$playingImg" v-if="isPlaying" @click="pauseAudio"></image>
					<view class="play-icon" :class="{'isRotate':isPlaying}"></view>
					<view class="d-flex justify-content-between progress-box align-items-center">
						<view class="progress-time text-right text-888888 fz-24">{{audioPlayTime}}</view>
						<view class="progress-wrap position-relative">
							<view class="progress-left position-absolute" :style="{width: progress +'%' }"> </view>
							<view class="progress-l position-absolute" :style="{left: progress +'%' }"></view>
						</view>
						<view class="progress-time text-right text-888888 fz-24">{{audioTime}}</view>
					</view>
				</view>
				<view class="lsj-upload" :class="{'reset-upload':blobUrl}">
					<image class="up-icon" src="/static/creation/Photograph.png" v-if="blobUrl"></image>
					<image src="/static/creation/upload.png" v-if="blobUrl === ''" @click="uploadAudio"></image>
					
					<view class="hfile_btn" v-if="blobUrl" @click="uploadAudio">
						<view class="text-F8F9FA fz-22">重新上传</view>
					</view>
				</view>
				<view class='slot-tip text-center' v-if="blobUrl == ''" >
					<view class="text-CCCDD5 fz-26">请上传不大于100MB的音频文件</view>
				</view>
			</view>
			<view class="item">
				<label class="fz-30 text-292940">作品名称</label>
				<u-form-item style="padding: 5px 0  !important;">
					<u-input type="text" v-model="name" :border="false" style="color:#343A40;font-size:30upx"
						placeholder="请输入作品名称"
						placeholder-style="color:#CED4DA; font-size:30upx" />
				</u-form-item>
			</view>
			<view class="d-flex justify-content-between align-items-center setting-list">
				<view class="text-292940 fz-30">类型</view>
				<view class="d-flex justify-content-right setting-right" @click="show = true">
					<view class=" text-CCCDD5 fz-30" v-if="type==''">请选择类型</view>
					<view class="text-292940 fz-30" v-else>{{type}}</view>
					<view class="arrow-icon">
						<image src='/static/mine/me-more.png'></image>
					</view>
				</view>
			</view>
			
			<view class="d-flex justify-content-between align-items-center setting-list" @click="albumShowUpdate">
				<view class="text-292940 fz-30">专辑</view>
				<view class="d-flex justify-content-right setting-right">
					<view class=" text-CCCDD5 fz-30" v-if="albumType==''">请选择专辑</view>
					<view class="text-292940 fz-30" v-else>{{albumType}}</view>
					<view class="arrow-icon">
						<image src='/static/mine/me-more.png'></image>
					</view>
				</view>
			</view>
		</view>
		<view class="type-wrap type-bottom-padding">
			<view class="text-292940 fz-30">上传封面</view>
			<view class="series-top">
				<view class="upload-padding position-relative">
					<view class="cover-box mb-2">
						<image v-if="cover" :src="cover" mode="aspectFill" class="works-overs">
							<image v-if="!cover" @click="uploadImage" class="upload-cover"
								src="/static/creation/upload-cover-icon.png"></image>
							<view v-else class="reset-upload-cover" @click="uploadImage">
								<image src="/static/creation/Photograph.png"></image>
							</view>
					</view>
				</view>
			</view>
			<view class="btn-box d-flex justify-content-between align-items-center">
				<view class="delete-box" @click="moadlShow = true">
					<view class="delete-icon">
						<image src="/static/creation/delete.png"></image>
					</view>
					<view class="text-center text-666978 fz-26">删除</view>
				</view>
				<view class="d-flex align-items-center justify-content-between" style="flex:1">
					<u-button type="text" class="text-ffffff fz-32 btn-submit btn-style save-bg" @click="save">保存</u-button>
					<u-button type="text" class="btn-submit btn-style casting-bg" @click="cast">铸造</u-button>
				</view>
			</view>
		</view>
		<u-select v-model="show" :list="categoryList" :default-value="defaultValue" @confirm="confirm" cancel-color="#292940" confirm-color="#292940">
		</u-select>
		<u-select v-model="albumShow" :list="albumList" :default-value="defaultValueAlbum" @confirm="confirmAlbum" cancel-color="#292940"
			confirm-color="#292940"></u-select>
		<nk-select-file v-model="nkshow" @confirm="getPath" :filterArr="filterArr" 
		backImg="https://postrings.oss-accelerate.aliyuncs.com/avatar/20230404/IeiYQAZyVeXBvkodgwV7mdUNqrc44vWTaS3qD5fP.png"
		directionImg="https://postrings.oss-accelerate.aliyuncs.com/avatar/20230404/L5yNmh9p0A1VulB4EqUaapLSMxnSvUIGSpJneAM2.png"
		enterImg="https://postrings.oss-accelerate.aliyuncs.com/avatar/20230404/L5yNmh9p0A1VulB4EqUaapLSMxnSvUIGSpJneAM2.png"
		folderImg="https://postrings.oss-accelerate.aliyuncs.com/avatar/20230404/c95oNlFO0ZUE1S1f4acburkJ8kxJMARotJhWfub4.png"
		fileImg="https://postrings.oss-accelerate.aliyuncs.com/avatar/20230404/3Sy1IrbakBzFvjZbqWnzFOkQLlUPCj3u0dEy3sga.png"
		txtImg="https://postrings.oss-accelerate.aliyuncs.com/avatar/20230404/HA20n1genHWZcMtDzlncMV8GbaSzg9bYMzoEGqHb.png"
		docImg="https://postrings.oss-accelerate.aliyuncs.com/avatar/20230404/PLVaneoMlRy0V3Yk22s0A3ehKKug9G2foZTbnWIR.png"
		pdfImg="https://postrings.oss-accelerate.aliyuncs.com/avatar/20230404/ZnBWihmKIoxYAnZ9RmQG5LRKUW9Srj4CARxmVGxe.png"
		selectedImg="https://postrings.oss-accelerate.aliyuncs.com/avatar/20230404/OycjVGatMMBrkz1ehX4VpXYDxf6kra4PWM7TPym4.png"
		unselectedImg="https://postrings.oss-accelerate.aliyuncs.com/avatar/20230404/BudsrWCuTxU0MfmTuVP2BDUgLFXgruFcPJqnv9FJ.png">
		</nk-select-file>
		<u-popup v-model="progressShow" :mask-close-able="false" border-radius="14" mode="center">
			<view class="pop-cs">
				<u-circle-progress active-color="#00D7FF" :percent="percent" duration="500">
					<view class="u-progress-content">
						<view class="u-progress-dot"></view>
						<text class='u-progress-info'>{{percent}}%</text>
					</view>
				</u-circle-progress>
				<view class="mt-1">作品上传中</view>
			</view>
		</u-popup>
		<u-popup v-model="popAddAlbumShow" mode="center" border-radius="16" closeable>
			<view class="album-box">
				<view class="title">
					铸造作品
				</view>
				<view class="item">
					<label class="text-36363A fz-32">铸造数量</label>
					<u-input v-model="count" :focus="popAddAlbumShow" :custom-style="customStyle" height="80" border="bottom"
						class="input-box" clearable label-width="0" placeholder="铸造数量" type="number"
						placeholder-style="color:#CCCDD5;" :border="false" clear-size="36">
					</u-input>
				</view>
				<u-button class="add-btn" :loading="castLoading" @click="casting" hover-class="none">铸造</u-button>
			</view>
		</u-popup>
		<u-modal v-model="moadlShow" ref="uModal" @confirm="deleteWorks" :async-close="true" content="确定删除此作品吗?" show-cancel-button confirm-color="#00C0FF"></u-modal>
	</view>
</template>

<script>
	import ossUpload from '@/common/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				moadlShow:false,
				progressShow:false,
				percent:'',
				nkshow: false,
				progress: '0', //播放进度
				name: '', //作品名称
				file: '', //作品
				cover: '', //封面
				size: 100, //限制上传音频100M内
				upload_progress: '', //上传进度【待用】
				innerAudioContext: '', //音乐控件上下文
				isPlaying: false, //音乐是否播放中
				AudioDuration: '', //音乐时长
				nowPlayTime: '' ,//音乐当前播放时间、位置
				filterArr:['mp3', 'wav', 'flac', '3pg', 'aa', 'aac', 'ape', 'au', 'm4a', 'mpc', 'ogg', 'm4r'],
				blobUrl: '', //二进制文件流
				fileType: '' ,//文件类型
				type: '',//类型
				albumType:'',//专辑
				defaultValue:[0],
				defaultValueAlbum:[0],
				category_index:'',
				album_index:'',
				show:false,//展示选择类型
				albumShow:false,//展示选择专辑
				popAddAlbumShow:false,//显示铸造数量
				count:1,//数量数量
				customStyle: {
					fontSize: '32upx'
				},
				saveLoading:false,
				castLoading:false
			}
		},
		onLoad(options) {
			this.name = options.name
			this.file = options.file
			this.work_id = options.work_id
			this.type = options.category_name
			this.albumType = options.album_name
			this.cover = options.cover
			this.blobUrl = options.file
			this.file = options.file
			if (this.file !== '') {
				this.createAudioContext()
			}
			for(let i in this.categoryList){
				if(this.categoryList[i].value == options.category_id){
					this.category_index = i
					this.defaultValue = [Number(i)]
				}
			}
			for(let i in this.albumList){
				if(this.albumList[i].value == options.album_id){
					this.album_index = i
					this.defaultValueAlbum = [Number(i)]
				}
			}
		},
		watch:{
			//强制正整数
			count(val){
				if(val !== ''){
					this.$nextTick(()=>{
						this.count = val.replace(/^(0+)|[^\d]+/g,'')
					})
				}
			}
		},
		computed: {
			//类型列表
			categoryList() {
				let arr = []
				let list = this.$store.state.works.categoryList
				for (let i in list) {
					arr.push({
						value: list[i].id,
						label: list[i].name,
						extra: i
					})
				}
				return arr
			},
			//专辑列表
			albumList() {
				let arr = []
				let list = this.$store.state.user.albumList
				for (let i in list) {
					arr.push({
						value: list[i].id,
						label: list[i].name,
						extra: i
					})
				}
				return arr
			},
			//音乐总时间
			audioTime() {
				if (this.AudioDuration > 0) {
					// 转换为式分秒
					let m = parseInt(this.AudioDuration / 60 % 60)
					m = m < 10 ? '0' + m : m
					let s = parseInt(this.AudioDuration % 60)
					s = s < 10 ? '0' + s : s
					// 作为返回值返回
					return `${m}:${s}`
				}
				return '00:00'
			},
			//音乐当前播放时间
			audioPlayTime() {
				if (this.nowPlayTime > 0) {
					// 转换为式分秒
					let m = parseInt(this.nowPlayTime / 60 % 60)
					m = m < 10 ? '0' + m : m
					let s = parseInt(this.nowPlayTime % 60)
					s = s < 10 ? '0' + s : s
					// 作为返回值返回
					return `${m}:${s}`
				}
				return '00:00'
			},
			animationState() {
				if (this.isPlaying) {
					return 'animation-play-state:running'
				}
				return 'animation-play-state:paused'
			}
		},
		//监听手机返回
		onBackPress(event) {  
			if (this.blobUrl) {
				this.pauseAudio()
				setTimeout(()=>{
					this.innerAudioContext.destroy()
				},1)
			}
		}, 
		onHide() {
			if (this.blobUrl) {
				this.pauseAudio()
			}
		},
		methods: {
			albumShowUpdate(){
				if(this.albumList.length == 0){
					return uni.$u.toast('无可用专辑，请前往添加')
				}
				this.albumShow = true
			},
			confirm(e) {
				this.type = e[0].label || ''
				this.category_index = Number(e[0].extra)
				this.defaultValue = [this.category_index]
			},
			confirmAlbum(e) {
				this.albumType = e[0].label || ''
				this.album_index = Number(e[0].extra)
				this.defaultValueAlbum = [this.album_index]
			},
			//验证
			verification(){
				if(this.blobUrl === ''){
					uni.$u.toast('请上传作品')
					return false
				}
				if(this.name === ''){
					uni.$u.toast('请输入作品名称')
					return false
				}
				if(this.type === ''){
					uni.$u.toast('请选择类型')
					return false
				}
				if(this.albumType === ''){
					uni.$u.toast('请选择专辑')
					return false
				}
				if(this.cover === ''){
					uni.$u.toast('请上传封面')
					return false
				}
				return true
			},
			//保存
			save(){
				if(this.verification()){
					this.onlineUploadSave()
				}
			},
			//铸造
			cast(){
				if(this.verification()){
					this.popAddAlbumShow = true
				}
			},
			casting(){
				if(this.count === ''){
					return uni.$u.toast('请输入铸造数量')
				}
				this.onlineUploadCast()
			},
			//保存时上传
			onlineUploadSave(){
				if(this.file != this.blobUrl){
					ossUpload(this.blobUrl, this.fileType, result => {
						this.progressShow = false
						this.percent = 0
						this.file = result
						let param = {
							name:this.name,
							type:2,
							category_id:this.categoryList[this.category_index].value,
							file:this.file,
							album_id:this.albumList[this.album_index].value,
							cover:this.cover,
							work_id:this.work_id
						}
						this.saveLoading = true
						this.$store.dispatch('works/workStore', param).then(res => {
							if (this.file) {
								this.pauseAudio()
								this.innerAudioContext.destroy()
							}
							this.saveLoading = false
							this.getDraftList()
							uni.$u.toast('保存成功')
							setTimeout(()=>{
								uni.redirectTo({
									url:'/pages/secondary/mine/creation'
								})
							},1000)
						}).catch(error => {
							this.saveLoading = false
						})
					},failc=>{},progress=>{
						this.progressShow = true
						this.percent = progress
					})
				}else{
					let param = {
						name:this.name,
						type:2,
						category_id:this.categoryList[this.category_index].value,
						file:this.file,
						album_id:this.albumList[this.album_index].value,
						cover:this.cover,
						work_id:this.work_id
					}
					this.saveLoading = true
					this.$store.dispatch('works/workStore', param).then(res => {
						if (this.file) {
							this.pauseAudio()
							this.innerAudioContext.destroy()
						}
						this.saveLoading = false
						this.getDraftList()
						uni.$u.toast('保存成功')
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pages/secondary/mine/creation'
							})
						},1000)
					}).catch(error => {
						this.saveLoading = false
					})
				}
			},
			//铸造时上传
			onlineUploadCast() {
				if(this.file != this.blobUrl){
					this.castLoading = true
					setTimeout(()=>{
						this.popAddAlbumShow = false
						this.castLoading = false
						ossUpload(this.blobUrl, this.fileType, result => {
							this.progressShow = false
							this.percent = 0
							this.file = result
							let param = {
								name:this.name,
								type:2,
								category_id:this.categoryList[this.category_index].value,
								file:this.file,
								album_id:this.albumList[this.album_index].value,
								cover:this.cover,
								work_id:this.work_id
							}
							this.$store.dispatch('works/workStore',param).then(res=>{
								this.$store.dispatch('works/workMint',{work_id:res.data.id,count:this.count}).then(ress=>{
									this.getCastList()
									uni.$u.toast('铸造成功')
								})
							})
						},failc=>{},progress=>{
							this.progressShow = true
							this.percent = progress
						})
					},300)
				}else{
					let param = {
						name:this.name,
						type:2,
						category_id:this.categoryList[this.category_index].value,
						file:this.file,
						album_id:this.albumList[this.album_index].value,
						cover:this.cover
					}
					this.castLoading = true
					this.$store.dispatch('works/workStore',param).then(res=>{
						this.$store.dispatch('works/workMint',{work_id:res.data.id,count:this.count}).then(ress=>{
							this.castLoading = false
							this.popAddAlbumShow = false
							this.getCastList()
							uni.$u.toast('铸造成功')
						}).catch(error=>{
							this.popAddAlbumShow = false
							this.castLoading = false
						})
					}).catch(error=>{
						this.castLoading = false
					})
				}
			},
			//获取铸造列表
			getCastList(){
				//重置上一页搜索,并重新获取列表数据
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2];// 上级页面实例
				let prevPageNext = pages[pages.length - 3]
				if(prevPage.route == 'pages/tabBars/creation'){
					prevPage.$vm.keyword = ''
					prevPage.$vm.searchKeyword = ''
				}else if(prevPageNext && (prevPageNext.route == 'pages/tabBars/creation')){
					prevPageNext.$vm.keyword = ''
					prevPageNext.$vm.searchKeyword = ''
				}
				this.$store.dispatch('works/work',{status:1,page:1}).then(res=>{
					setTimeout(()=>{
						uni.redirectTo({
							url:'/pages/secondary/mine/creation'
						})
					},500)
				})
			},
			//删除作品
			deleteWorks(){
				this.$store.dispatch('works/workDelete',{work_id:this.work_id}).then(res=>{
					this.moadlShow = false
					uni.$u.toast('删除成功')
					this.getDraftList()
					setTimeout(()=>{
						this.tui.goBack()
					},500)
				}).catch(error=>{
					this.$refs.uModal.clearLoading();
				})
			},
			//获取草稿列表
			getDraftList(){
				this.$store.dispatch('works/work',{status:0}).then(res=>{})
			},
			getPath(event) {
				let extension = ['mp3', 'wav', 'flac', '3pg', 'aa', 'aac', 'ape', 'au', 'm4a', 'mpc', 'ogg', 'm4r']
				this.fileType = event[0].name.substring(event[0].name.lastIndexOf(".") + 1);
				let size = parseFloat(event[0].sizeMB)
				if(size > 100){
					return uni.$u.toast('音频作品超过100MB,请重新上传')
				}
				let index = extension.findIndex((value, index) => value == this.fileType)
				if (index !== -1) {
					this.blobUrl = event[0].url
					this.file = ''
					this.nowPlayTime = 0
					this.progress = 0
					this.createAudioContext()
				} else {
					uni.$u.toast('请上传音频类型文件')
				}
			},
			goBack() {
				if (this.blobUrl) {
					this.pauseAudio()
					setTimeout(()=>{
						this.innerAudioContext.destroy()
					},1)
				}
				this.tui.goBack()
			},
			//播放音乐
			palyAudio() {
				this.innerAudioContext.play()
				this.$nextTick(()=>{
					this.isPlaying = true
				})
			},
			//暂停音乐
			pauseAudio() {
				this.innerAudioContext.pause()
				this.isPlaying = false
			},
			//停止音乐
			stopAudio() {
				this.innerAudioContext.stop()
				this.isPlaying = false
			},
			//创建音频上下文
			createAudioContext() {
				if(!this.innerAudioContext){
					this.innerAudioContext = uni.createInnerAudioContext();
				}
				this.innerAudioContext.src = this.blobUrl
				this.innerAudioContext.pause()
				this.isPlaying = false
				this.innerAudioContext.onCanplay((e) => {
					this.AudioDuration = Math.floor(this.innerAudioContext.duration)
					this.nowPlayTime = 0
				});

				//监听音乐播放
				this.innerAudioContext.onPlay(() => {
					this.isPlaying = true
					console.log('音乐开始播放了');
				});
				//监听音乐暂停
				this.innerAudioContext.onPause(() => {
					this.isPlaying = false
					console.log('音乐暂停了');
				});
				//监听音乐停止
				this.innerAudioContext.onStop(() => {
					this.isPlaying = false
					console.log('音乐停止了');
				});
				//监听音乐自然播放结束
				this.innerAudioContext.onEnded(() => {
					this.nowPlayTime = this.AudioDuration
					this.progress = 100
					this.isPlaying = false
					console.log('音乐播放完了');
				});
				//监听音乐播放进度更新事件
				this.innerAudioContext.onTimeUpdate(() => {
					this.nowPlayTime = Math.floor(this.innerAudioContext.currentTime)
					this.progress = parseFloat((this.nowPlayTime / this.AudioDuration) * 100)
				});
			},
			//上传作品[音频]
			uploadAudio() {
				if (this.blobUrl) {
					this.pauseAudio()
				}
				// #ifdef APP-PLUS
				this.nkshow=true
				// #endif
				// #ifdef H5
				let audio_list = ['mp3', 'wav', 'flac', '3pg', 'aa', 'aac', 'ape', 'au', 'm4a', 'mpc', 'ogg'];
				//选择音频文件
				uni.chooseFile({
					count: 1, //选取的文件个数限制
					extension: [".mp3,.wav,.flac,.3pg,.aa,.aac,.ape,.au,.m4a,.mpc,.ogg,.m4r"], //可定义允许哪些后缀的文件可被选择
					success: async (tempRes) => {
						let size = tempRes.tempFiles[0].size
						if(size > 100 * 1024 * 1024){
							return uni.$u.toast('音频作品超过100MB,请重新上传')
						}
						// #ifdef H5
						//网页端获取文件类型
						this.fileType = tempRes.tempFiles[0].name.substring(tempRes.tempFiles[0].name.lastIndexOf(".") + 1);
						// #endif
						//获取上传文件blob地址
						let index = audio_list.indexOf(this.fileType)
						if(index < 0) return uni.$u.toast('请上传音频类型文件')
						this.blobUrl = tempRes.tempFilePaths[0]
						this.file = ''
						this.nowPlayTime = 0
						this.progress = 0
						this.createAudioContext()
					},
				});
				// #endif
			},
			//上传封面[图片]
			uploadImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (tempRes) => {
						let fileType = ''
						// #ifdef H5
						//网页端获取文件类型
						fileType = tempRes.tempFiles[0].name.substring(tempRes.tempFiles[0].name.lastIndexOf(".") + 1);
						// #endif
						//获取上传文件blob地址
						const filePath = tempRes.tempFilePaths[0]
						ossUpload(filePath, fileType , result => {
								this.cover = result
								uni.hideLoading()
							}
						)
					}
				})
			},
			//我的作品
			myWorks(status) {
				this.$store.dispatch('works/myWorks', {
					status: status
				}).then(res => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-body {
		width: 690upx;
		height: 690upx;
		background: #F8F9FA;
		border-radius: 16upx;
		position: relative;
		overflow: hidden;
		// box-shadow: 0px 2upx 10upx 0upx rgba(66,61,53,0.1000);
		border: 1px dashed #DEE2E6;
		display: flex;
		align-items: center;
		justify-content: center;
		.audio-img {
			width: 80upx;
			height: 80upx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			z-index: 99;
			top: 257upx;
		}
	}

	.isShadow {
		box-shadow: 0px 0px 20upx -8upx rgba(173, 181, 189, 0.3), 0px 0px 30upx -10upx rgba(173, 181, 189, 0.5);
		background: url('/static/creation/audio-upload-bg.png') no-repeat;
		background-size: cover;
	}

	/deep/ .uni-audio-left {
		width: 594upx;
		height: 594upx;
		margin-left: 50upx;
		background: rgba(255, 255, 255, 0);
		overflow: hidden;
		position: relative;
	}

	/deep/ .uni-audio-right {
		height: 90upx;
		margin-left: 0;
		width: 107upx;
		padding: 0;
		margin: 0;
	}

	/deep/ .uni-audio-button {
		width: 80upx;
		height: 80upx;
		margin: 0;
		z-index: 1999 !important;
		position: absolute;
		left: 257upx;
		top: 257upx;
	}

	/deep/ .uni-audio-default {
		width: 690upx;
		height: 690upx;
		margin: 0 auto;
		border: none;
		background: #ffffff;
	}

	/deep/.uni-audio-info {
		display: none;
	}

	/deep/.uni-audio-time {
		width: 107upx;
		height: 90upx;
		margin: 0;
		padding: 34upx 0 0 28upx;
		float: none;
		box-sizing: border-box;
	}

	/deep/.uni-audio-button.play {}

	.audio-bg {
		width: 594upx;
		height: 594upx;
		background-image: url(/static/creation/new-Audiobg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		top: 0;
		left: 50upx;
		z-index: 20;
		border-radius: 100%;
		position: relative;

	}

	@-webkit-keyframes rotation {
		from {
			-webkit-transform: rotate(0deg);
		}

		to {
			-webkit-transform: rotate(360deg);
		}
	}

	.isAudio {
		-webkit-transform: rotate(360deg);
		animation: rotation 23s linear infinite;
		-moz-animation: rotation 23s linear infinite;
		-webkit-animation: rotation 23s linear infinite;
		-o-animation: rotation 23s linear infinite;
	}

	.play-icon {
		width: 100upx;
		height: 260upx;
		background-image: url(/static/creation/audio-icon.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: -20upx;
		right: 50upx;
		z-index: 90;
		transform-Origin: top;
		transition: 1s;

	}

	.isRotate {
		transform-Origin: top;
		transition: 1s;
		transform: rotate(38deg);
	}

	.progress-box {
		box-sizing: border-box;
		width: 690upx;
		// width: 583upx;
		height: 90upx;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.progress-time {
		width: 107upx;
		padding-right: 28upx;
	}

	.progress-wrap {
		width: 475upx;
		height: 8upx;
		background: rgba(233, 236, 239, 0.85);
		border-radius: 6upx;
	}

	.progress-left {
		height: 8upx;
		background: #292940;
		border-radius: 6upx;
		transition: 0.3s;
	}

	.progress-l {
		width: 8upx;
		height: 16upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 6upx 0px #ADB5BD;
		border-radius: 4upx;
		top: -4upx;
		transition: 0.3s;
		/* #ifdef APP-PLUS */
			top: -6upx;
		/* #endif */
	}

	.type-wrap {
		width: 100%;
		padding: 40upx 30upx 0 30upx;
		box-sizing: border-box;
	}
	.type-bottom-padding{
		padding-bottom:150upx;
	}
	.item {
		width: 100%;
		margin-top: 58upx;

		label {
			display: block;
			width: 100%;
		}
	}

	.btn-box {
		padding: 20upx 0 20upx 26upx;
		width: 100%;
		position: fixed;
		bottom: var(--window-bottom);
		background: #FFFFFF;
		left: 0;

		.delete-box {
			width: 70upx;
			margin-right: 6upx;

			.delete-icon {
				width: 35upx;
				height: 35upx;
				margin: 0 auto;
				margin-bottom: 18upx;

				image {
					width: 35upx;
					height: 35upx;
					vertical-align: top;
				}
			}
		}

		.btn-style {
			width: 290upx;
			height: 84upx !important;
			box-shadow: 0px 4upx 16upx -6upx rgba(146, 84, 222, 0.1), 0px 10upx 20upx -8upx rgba(146, 84, 222, 0.15);
			border-radius: 49upx;
		}

		.save-bg {
			background: #292940;
		}
		
		.casting-bg {
			background: linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%);
		}
	}

	.series-top {
		width: 214upx;
		height: 214upx;
		background: #F8F9FA;
		border-radius: 8upx;
		margin-top: 23upx;
	}
	.slot-btn {
		width: 112upx;
		height: 112upx;
		position: absolute;
		top: -50000upx;
		left: -99950upx;
	}

	/deep/ .u-list-item {
		background: rgba(255, 255, 255, 0) !important;
		margin: 0;
		border: none;
	}

	/deep/ .u-icon {
		color: rgba(255, 255, 255, 0);
	}

	/deep/.textarea-box .u-border-bottom:after {
		border: none;
	}

	.upload-btn {
		position: absolute;
		left: 50%;
		top: 580upx;
		// bottom:120upx;
		transform: translateX(-50%);
		display: inline-block;
		height: 50upx;
		background: rgba(000, 000, 000, 0.35);
		border-radius: 25upx;
		padding: 0 22upx;
		z-index: 666;

		.up-icon {
			width: 32upx;
			height: 32upx;
			margin-right: 10upx;
			vertical-align: top;
		}

	}

	.upload-box {
		width: 690upx;
		height: 690upx;
		margin: 0 auto;
		background: #F8F9FA;
		position: relative;
		border-radius: 8upx;
		overflow: hidden;
		
		.slot-btn {
			width: 120upx;
			height: 120upx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 285upx;
			background-color: #9254DE;

			image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.cover-box {
		width: 214upx;
		height: 214upx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8upx;
		overflow: hidden;

		.works-overs {
			width: 100%;
			height: 100%;
		}

		.upload-cover {
			width: 88upx;
			height: 68upx;
		}

		.reset-upload-cover {
			position: absolute;
			right: 0;
			bottom: 0upx;
			width: 48upx;
			height: 48upx;
			background: rgba(000, 000, 000, 0.5);
			border-radius: 8upx 0px 8upx 0px;

			image {
				width: 32upx;
				height: 32upx;
				padding: 7upx 0 0 8upx;
			}
		}
	}

	.hfile_btn {
		height: 50upx !important;
		display: flex;
		align-items: center;
	}

	.lsj-upload {
		width: 120upx;
		height: 120upx;
		position: absolute;
		left: 50%;
		top: 50%;
		top:214upx;
		transform: translateX(-50%);

		image {
			width: 100%;
			height: 100%;
		}
	}
	.slot-tip{
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 50%;
		top: 358upx;
	}
	.reset-upload {
		position: absolute;
		top: 550upx;
		height: 50upx;
		background: rgba(000, 000, 000, 0.35);
		border-radius: 25upx;
		padding: 0 22upx;
		z-index: 666;
		display: flex;
		align-items: center;
		width: 174upx;
		justify-content: space-between;

		.up-icon {
			width: 32upx;
			height: 32upx;
			vertical-align: top;
		}
	}
	.pop-cs{
		padding: 30upx 80upx;
		background: #ffffff;
		border-radius: 14upx;
		text-align: center;
	}
	.setting-list {
		width: 100%;
		height: 116upx;
		border-bottom: 1px solid rgba(216, 222, 228, 0.4);
	
		.setting-right {
			height: 116upx;
			align-items: center;
	
			span {
				display: inline-block;
				width: 12upx;
				height: 12upx;
				background: #FF4D4F;
				border-radius: 100%;
				//margin-right: 10upx;
			}
	
			.user-name {
				font-size: 30upx;
				color: #999999;
			}
		}
	
		.arrow-icon {
			width: 28upx;
			height: 28upx;
			margin-left: 10upx;
	
			image {
				width: 28upx;
				height: 28upx;
				vertical-align: top;
			}
		}
	
		/deep/.u-badge--dot {
			width: 12upx;
			height: 12upx;
			margin-top: 4upx;
		}
	}
	.album-box {
		width: 640upx;
		background: #FFFFFF;
		padding: 50upx 45upx 60upx 45upx;
	
		.title {
			color: #292940;
			font-size: 36upx;
			text-align: center;
			font-weight: 500;
		}
	
		.item {
			width: 100%;
			height: 182upx;
			box-sizing: border-box;
			padding-top: 50upx;
			border-bottom: 1upx solid #D8DEE4;
			position: relative;
			margin-bottom: 60upx;
			color: #292940;
			font-size: 36upx;
	
			.input-box {
				width: 100%;
				margin-top: 10upx !important;
				font-size: 40upx !important;
			}
		}
	
		.add-btn {
			width: 544upx;
			height: 98upx;
			background: #292940 !important;
			border-radius: 49upx;
			color: #FFFFFF;
			font-size: 36upx;
			text-align: center;
		}
	
	}
</style>
